import ProCard from '@ant-design/pro-card';
import { Menu } from 'antd';
import React, { useState } from 'react';
import { useIntl } from 'umi';

import BaseView from './components/base';
import NotificationView from './components/notification';
import SecurityView from './components/security';

const AccountSettings: React.FC = () => {
    const [activeKey, setActiveKey] = useState<string>('base');
    /**
     * @en-US International configuration
     * @zh-CN 国际化配置
     * */
    const intl = useIntl();

    const renderChildren = (selectKey: string) => {
        switch (selectKey) {
            case 'base':
                return <BaseView />;
            case 'security':
                return <SecurityView />;
            case 'notification':
                return <NotificationView />;
            default:
                return null;
        }
    };

    return (
        <ProCard split="vertical">
            <ProCard colSpan="224px" bodyStyle={{
                padding: '18px 0'
            }}>
                <Menu mode="inline"
                    defaultSelectedKeys={['base']}
                    onClick={({ key }) => setActiveKey(key)}
                >
                    <Menu.Item key="base">
                        {intl.formatMessage({
                            id: 'pages.account.settings.base',
                            defaultMessage: '个人资料'
                        })}
                    </Menu.Item>
                    <Menu.Item key="security">
                        {intl.formatMessage({
                            id: 'pages.account.settings.security',
                            defaultMessage: '安全设置'
                        })}
                    </Menu.Item>
                    <Menu.Item key="notification">
                        {intl.formatMessage({
                            id: 'pages.account.settings.notification',
                            defaultMessage: '新消息通知'
                        })}
                    </Menu.Item>
                </Menu>
            </ProCard>
            {renderChildren(activeKey)}
        </ProCard>
    )
};

export default AccountSettings;